import { useState, useEffect, CSSProperties } from 'react'
import { MessagePlugin } from 'tdesign-react'
import dice1Icon from '@/assets/images/web-games/dice/dice1.svg'
import dice2Icon from '@/assets/images/web-games/dice/dice2.svg'
import dice3Icon from '@/assets/images/web-games/dice/dice3.svg'
import dice4Icon from '@/assets/images/web-games/dice/dice4.svg'
import dice5Icon from '@/assets/images/web-games/dice/dice5.svg'
import dice6Icon from '@/assets/images/web-games/dice/dice6.svg'
import styles from './index.module.less'

const Dice = (props: any) => {

  const {
    timestamp = Date.now()
  } = props

  const [point, setPoint] = useState(0)

  useEffect(() => {
    setPoint(getRandomPoint())
  }, [timestamp])

  const getRandomPoint = () => {
    let _point = Math.floor(Math.random() * 6) + 1
    // _point = 2
    setTimeout(() => {
      showPointTipModal(_point)
    }, 2300)
    return _point
  }

  const showPointTipModal = (point: number) => {
    MessagePlugin.info({
      content: `点数为: ${point}`,
      placement: 'top-right',
      duration: 2000,
    })
  }

  return <>
    <div className={styles.diceWrapper}>
      <div
        id={timestamp}
        key={timestamp}
        className={styles.dice}
        style={
          { '--animation-name': styles[`dice-rotate-${point}`] } as CSSProperties
        }
      >
        <div className={styles.diceOne}>
          <img src={dice1Icon} />
        </div>
        <div className={styles.diceTwo}>
          <img src={dice2Icon} />
        </div>
        <div className={styles.diceThree}>
          <img src={dice3Icon} />
        </div>
        <div className={styles.diceFour}>
          <img src={dice4Icon} />
        </div>
        <div className={styles.diceFive}>
          <img src={dice5Icon} />
        </div>
        <div className={styles.diceSix}>
          <img src={dice6Icon} />
        </div>
      </div>
    </div>
  </>
}

export default Dice
